<template>
    <div class="body">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="block">
                    <img src="@/assets/img/ele.png" class="pic" />
                    <div class="num">{{ topData.total }}</div>
                    <div class="title">电梯设备总数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #59ba5e">
                    <img src="@/assets/img/yes.png" class="pic" />
                    <div class="num">{{ topData.normal }}</div>
                    <div class="title">正常运行设备总数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #f5b01c">
                    <img src="@/assets/img/warn.png" class="pic" />
                    <div class="num">{{ topData.fault }}</div>
                    <div class="title">故障设备数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #ee9696">
                    <img src="@/assets/img/alarm.png" class="pic" />
                    <div class="num">{{ topData.emergency }}</div>
                    <div class="title">发生报警设备总数</div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="chart">
                    <div class="title">电梯运行时长统计</div>
                    <div class="button">近1个月</div>
                    <div class="chart-container" id="chart-container"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="chart">
                    <div class="title">电梯停留楼层趋势</div>
                    <div class="button">近24小时</div>
                    <!-- <div class="time-btn">
				       <el-radio-group v-model="radio" size="mini">
				         <el-radio-button label="主楼"></el-radio-button>
				         <el-radio-button label="副楼"></el-radio-button>
				       </el-radio-group>
				  </div> -->
                    <div class="chart-container" id="chart-container2"></div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="chart">
                    <div class="title">电梯运行状态</div>
                    <!-- <div class="time-btn">
				       <el-radio-group v-model="radio2" size="mini">
				         <el-radio-button label="主楼"></el-radio-button>
				         <el-radio-button label="副楼"></el-radio-button>
				       </el-radio-group>
				  </div> -->
                    <div class="list">
                        <!--					<div class="list-title">电梯</div>-->
                        <div class="list-subTitle">昂宝大厦A栋主楼</div>
                        <el-row>
                            <el-col
                                :span="num"
                                v-for="(item, index) in elevator"
                                :key="index"
                            >
                                <div class="block-out">
                                    <div style="margin: auto">
                                        <!-- <div :id="index" class="circle"></div> -->
                                        <div
                                            v-if="item.normal == '1'"
                                            class="circle"
                                        ></div>
                                        <div
                                            v-else-if="item.emergency == '1'"
                                            class="circle"
                                            style="
                                                background-color: rgb(
                                                    144,
                                                    124,
                                                    124
                                                );
                                            "
                                        ></div>
                                        <div
                                            v-else-if="item.fault == '1'"
                                            class="circle"
                                            style="background-color: #f02e2e"
                                        ></div>
                                        <!-- <div class="describe">客梯A00{{ item.sub_id }}</div> -->
                                    </div>
                                    <div>
                                        {{ item.name }}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- <div class="list">
					<div class="list-title">货梯</div>
				  	<el-row>
				  		<el-col :span="num" v-for="(item,index) in elevator" :key="index">
				  			<div class="block-out">
				  				<div style="margin: auto;">
				  					<div :id="'as'+index" class="circle"></div>
				  					<div class="describe">货梯A00{{ item.sub_id }}</div>
				  				</div>
				  			</div>
				  		</el-col>
				  	</el-row>
				  </div> -->
                    <div
                        class="list"
                        style="
                            display: flex;
                            margin-left: 0;
                            height: 65px;
                            margin-top: 180px;
                        "
                    >
                        <div class="bottom">
                            <div class="circle" style="margin: 0"></div>
                            <span style="color: #aec0d3">运行</span>
                            <div style="width: 20px"></div>
                            <div
                                class="circle"
                                style="margin: 0; background-color: #f02e2e"
                            ></div>
                            <span style="color: #aec0d3">满载</span>
                            <div style="width: 20px"></div>
                            <div
                                class="circle"
                                style="margin: 0; background-color: #907c7c"
                            ></div>
                            <span style="color: #aec0d3">关闭</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="chart">
                    <div class="title">电梯运行故障趋势</div>
                    <!-- <div class="time-btn">
				       <el-radio-group v-model="radio3" size="mini">
				         <el-radio-button label="主楼"></el-radio-button>
				         <el-radio-button label="副楼"></el-radio-button>
				       </el-radio-group>
				  </div> -->
                    <div class="time-btn" style="left: 65%">
                        <el-radio-group
                            v-model="radio4"
                            size="mini"
                            @change="lastChart(radio4)"
                        >
                            <el-radio-button label="7">近7天</el-radio-button>
                            <el-radio-button label="1">近1个月</el-radio-button>
                            <el-radio-button label="3">近3个月</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div
                        class="chart-container"
                        style="height: 335px"
                        id="chart-container3"
                    ></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    elevatorTop,
    elevatorChart,
    countElevatorRunTime,
    countElevatorFault,
} from "@/api/sendhttp/son";
export default {
    data() {
        return {
            radio: "主楼",
            radio2: "主楼",
            radio3: "主楼",
            radio4: 7,
            topData: {},
            num: 0,
            elevator: [],
            eleName: [],
            eleData: [],
            faltTime: [],
            faltName: [],
            faltData: [],
            floor: [],
            count: [],
        };
    },
    mounted() {
        elevatorTop().then((res) => {
            this.topData = res.data.data;
        });
        elevatorChart(3).then((res) => {
            let len = res.data.data["昂宝大厦A栋主楼"].length;
            this.num = parseInt(24 / len);
            console.log("1111", res.data.data);
            this.elevator = res.data.data["昂宝大厦A栋主楼"];
            // for(let i=0;i<res.data.data[0].normal;i++){
            // 	this.elevator.push('normal')
            // }
            // for(let i=0;i<res.data.data[0].fault;i++){
            // 	this.elevator.push('fault')
            // }
            // for(let i=0;i<res.data.data[0].emergency;i++){
            // 	this.elevator.push('emergency')
            // }
            // for(let i=0;i<res.data.data.length;i++){
            // 	if(res.data.data[i].normal == 'fase') {
            // 		window.document.getElementById(i).style.backgroundColor='#F02E2E'
            // 		window.document.getElementById('as'+i).style.backgroundColor='#F02E2E'
            // 	}
            // }
            // setTimeout(()=>{
            // 	for(let i=0;i<res.data.data.length;i++){
            // 		if(res.data.data[i].normal == 'fase') {
            // 			window.document.getElementById(i).style.backgroundColor='#F02E2E'
            // 			window.document.getElementById('as'+i).style.backgroundColor='#F02E2E'
            // 		}
            // 	}
            // },800)
        });
        this.firstChart();
        this.secondChart();
        this.lastChart(this.radio4);
    },
    methods: {
        lastChart(t) {
            this.faltData = [];
            this.faltName = [];
            this.faltTime = [];
            countElevatorFault(t).then((res) => {
                var flag = true;
                for (let key in res.data.data) {
                    this.faltName.push(key + "电梯");
                    var ele = res.data.data[key];
                    var elData = [];
                    for (let key2 in ele) {
                        if (flag) {
                            this.faltTime.push(key2);
                        }
                        elData.push(ele[key2]);
                    }
                    this.faltData.push({
                        name: key + "电梯",
                        type: "line",
                        data: elData,
                        smooth: true,
                    });
                    flag = false;
                }
                this.chart3();
            });
        },
        firstChart() {
            countElevatorRunTime().then((res) => {
                if (res.data.code == "200") {
                    for (let key in res.data.data) {
                        this.eleName.push(key + "电梯");
                        this.eleData.push(res.data.data[key]);
                    }
                    console.log(this.eleData, this.eleName);
                    this.chart();
                }
            });
        },
        chart() {
            var dom = document.getElementById("chart-container");
            var myChart = this.$echarts.init(dom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var app = {};

            var option;

            option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                xAxis: {
                    type: "category",
                    axisLabel: {
                        show: true,
                        rotate: 40,
                    },
                    data: this.eleName,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: this.eleData,
                        type: "bar",
                        label: {
                            show: true,
                            position: "top",
                            color: "#EE9696",
                        },
                        itemStyle: {
                            color: "#EE9696",
                        },
                    },
                ],
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },
        secondChart() {
            elevatorChart(2).then((res) => {
                const { code, data, msg } = res.data;
                if (code == 200) {
                    this.floor = data.count.map((item) => item.FLOOR + "层"); // 楼层数据
                    this.count = data.count.map((item) => item.count);
                } else {
                    this.$message.error(msg); // 错误提示信息
                }
                this.chart2();
            });
        },
        chart2() {
            setTimeout(() => {
                var dom = document.getElementById("chart-container2");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};

                var option;

                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            rotate: 40,
                        },
                        data: this.floor,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: this.count,
                            type: "line",
                            smooth: true,
                            lineStyle: {
                                color: "#59BA5E",
                            },
                            itemStyle: {
                                color: "#59BA5E",
                            },
                            label: {
                                show: true,
                                position: "top",
                                color: "#59BA5E",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 2000);
        },

        chart3() {
            var dom = document.getElementById("chart-container3");
            var myChart = this.$echarts.init(dom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var app = {};

            var option;

            option = {
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.faltName,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.faltTime,
                },
                yAxis: {
                    type: "value",
                },
                series: this.faltData,
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },
    },
};
</script>

<style scoped lang="scss">
.body {
    padding: 20px;
}
.chart-container {
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 383px;
    overflow: hidden;
    margin: auto;
}
.block {
    width: 100%;
    height: 80px;
    line-height: 20px;
    border-radius: 8px;
    background-color: #56a3ee;
    text-align: center;
    position: relative;
}
.pic {
    position: absolute;
    top: 20px;
    left: 3%;
}
.num {
    position: absolute;
    right: 3%;
    top: 20px;
    color: rgba(255, 254, 232, 1);
    font-size: 28px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.title {
    position: absolute;
    right: 3%;
    top: 45px;
    color: rgba(255, 254, 232, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.chart {
    position: relative;
    margin: auto;
    width: 100%;
    height: 456px;
    border-radius: 8px;
    background-color: rgba(241, 243, 245, 1);
    border: 1px solid rgba(213, 213, 211, 1);
    .title {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 180px;
        height: 24px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
    }
    .button {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 81px;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(187, 187, 187, 1);
    }
}
.block-out {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #999999;
}
.time-btn {
    position: absolute;
    left: 185px;
    top: 17px;
}
.list {
    width: 97%;
    height: 150px;
    position: relative;
    top: 63px;
    margin-left: 3%;
    .name {
        color: #aec0d3;
        font-size: 16px;
        opacity: 0.65;
        position: relative;
        left: 22px;
    }
    .circle {
        width: 19px;
        height: 19px;
        line-height: 20px;
        border-radius: 50%;
        background-color: rgba(128, 228, 133, 1);
        border: 1px solid rgba(187, 187, 187, 1);
        margin: 0 auto;
    }
    .describe {
        color: #56a3ee;
        font-size: 12px;
        text-align: center;
    }
    .bottom {
        position: relative;
        margin: auto;
        display: flex;
        width: 201px;
    }
}
.list-title {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: #907c7c;
}
.list-subTitle {
    position: absolute;
    top: 24px;
    left: 10px;
    font-size: 14px;
    color: #907c7c;
}
</style>
